<template>
	<view>
		这是List页面
		
		<image v-if="dogImageUrl" 
		:src="dogImageUrl"
		@click="getDogImage"
		 mode="">
		 </image>
		 
		 <button @click="getCatImage()">获取猫咪图片</button>
		 
		 <image
		  v-for="item in catImages"
		 :src="item.url"
		  mode="">
		  </image>
		
	</view>
</template>

<script>
	export default {
		onLoad() {
			uni.showTabBarRedDot({
				index:1,
			})
			
			uni.showToast({
				title: '小红点将在2后取消'
			})
			
			setTimeout(() => {
				uni.hideTabBarRedDot({
					index: 1
				})
			}, 2000)
			this.getDogImage()
		},
		data() {
			return {
				dogImageUrl: '',
				catImages: []
			};
		},
		methods: {
			getDogImage(){
				uni.showLoading({
					title: '图片加载中...'
				})
				uni.request({
					url: 'https://dog.ceo/api/breeds/image/random',
					// timeout: '1000', // 设置超时时间，若超过此时间，则取消请求
					success: (res) => {
						if(res.data.status === 'success'){
							this.dogImageUrl = res.data.message
							// 
						}
					},
					fail: (error) => {
						debugger
					},
					complete: () => { // 无论请求是否成功与否，都执行此回调函数
						uni.hideLoading()
					}
				})
			},
			getCatImage(){
				uni.showLoading({
					title: '图片加载中...'
				})
				uni.request({
					url: 'https://api.thecatapi.com/v1/images/search',
					data: {
						limit: 3
					},
					success: (res) => {
						debugger
						if(res.statusCode === 200){
							this.catImages = res.data
							// 
						}
					},
					fail: (error) => {
						
					},
					complete: () => { // 无论请求是否成功与否，都执行此回调函数
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
